<template>
	<div class="home">
		<h1 style>智慧医疗管控平台</h1>
		<img class="top" src="../assets/top.png" alt />
		<div class="city">城市：成都</div>
		<div class="weather"></div>
		<div class="curr-time">{{ time }}</div>
		<div class="content">
			<div class="center-map" id="map"></div>
			<div class="right">
				<Card title="安全中心">
					<div class="safeCenter">
						<div class="scans">
							<div class="item">
								<img src="../assets/组 216@2x.png" alt="" />
								<div>
									<h5>水质超标</h5>
									<span class="num">0</span>
									<span>个</span>
								</div>
							</div>
							<div class="item">
								<img src="../assets/设备异常@2x.png" alt="" />
								<div>
									<h5>设备异常</h5>
									<span class="num">0</span>
									<span>个</span>
								</div>
							</div>
							<div class="item">
								<img src="../assets/药量不足@2x.png" alt="" />
								<div>
									<h5>药量不足</h5>
									<span class="num">0</span>
									<span>个</span>
								</div>
							</div>
						</div>
						<ul>
							<li
								v-for="(item, idx) in allSecurityEvents"
								:key="idx"
								class="station"
							>
								<span>{{ item.text }}</span>
								<span>{{ item.time }}</span>
							</li>
						</ul>
					</div>
				</Card>
				<Card title="内部管理">
					<Divider title="员工"></Divider>
					<ScrollView>
						<ul class="stafflist">
							<li v-for="(item, idx) in allStaff" :key="idx">
								<img
									class="box"
									src="../assets/组 4617@2x.png"
									alt=""
								/>
								<span>{{ item.loginName }}</span>
								<img
									src="../assets/路径 55@2x.png"
									class="icon"
									alt=""
								/>
							</li>
						</ul>
					</ScrollView>
					<br />
					<br />
					<br />
					<Divider title="车辆"></Divider>

					<ScrollView>
						<ul class="carlist">
							<li
								v-for="(item, idx) in allCar"
								:key="idx"
								@click="
									handleCarMarkerClick({
										target: { w: { title: item._id } },
									})
								"
							>
								<img
									class="box"
									src="../assets/组 4615@2x.png"
									alt=""
								/>
								<span>{{ item.carId }}</span>
								<img
									src="../assets/组 4616@2x.png"
									class="icon"
									alt=""
								/>
							</li>
						</ul>
					</ScrollView>
					<br />
					<br />
					<br />
					<Divider title="站点"></Divider>

					<ScrollView>
						<ul class="areas">
							<li
								v-for="(item, idx) in allDepart"
								:key="idx"
								@click="onAreaChange(idx)"
							>
								<img
									v-if="idx === currArea"
									src="../assets/多边形-active.png"
									alt=""
								/>
								<img v-else src="../assets/多边形.png" alt="" />
								<span
									class="num"
									:style="{
										color:
											idx === currArea
												? '#fff'
												: '#FFCD5E',
									}"
									>{{ item.list.length }}</span
								>
								<span class="name">{{ item.name }}</span>
							</li>
						</ul>
					</ScrollView>

					<ScrollView ref="stationList">
						<ul class="stationList">
							<li
								v-for="(item, idx) in currStationList"
								:key="idx"
								@click="
									handleSiteMarkerClick({
										target: { w: { title: item._id } },
									})
								"
							>
								<img src="../assets/组 4613@2x.png" alt="" />
								<span>{{ item.name }}</span>
							</li>
						</ul>
					</ScrollView>
				</Card>
			</div>
		</div>
		<el-drawer
			title="站点详情"
			:visible.sync="drawer"
			direction="ltr"
			:modal="false"
		>
			<iframe :src="siteIframe" class="iframe" frameborder="0"></iframe>
		</el-drawer>
		<el-drawer
			:visible.sync="carDrawer"
			direction="ltr"
			class="car-drawer"
			:modal="false"
			:with-header="false"
		>
			<div class="content">
				<div class="car">
					<img :src="currCar.carPic" alt="" class="img" />
					<div class="info">
						<h2>车辆信息</h2>
						<h5>车牌号</h5>
						<h2>{{ currCar.carId }}</h2>
						<h5>车辆类型</h5>
						<h2>{{ currCar.carType }}</h2>
						<h5>状态</h5>
						<h2>{{ currCar.status }}</h2>
						<h5>备注</h5>
						<h2>{{ currCar.remark }}</h2>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>


import Card from '@/components/Card'
import ScrollView from '@/components/ScrollView'
import Divider from '@/components/Divider'
import API from './api'
export default {
	name: 'home',
	components: { Card, ScrollView, Divider },
	data() {
		return {
			drawer: false,
			carDrawer: false,
			currArea: 0,
			siteIframe: '',
			time: '',
			allCarCoordinate: [],
			allSecurityEvents: [],
			allSiteCoordinate: [],
			allStaff: [],
			allCar: [],
			allDepart: [],
			currCar: {}
		}
	},
	async created() {
		Promise.all([API.findAllSiteCoordinate(), API.findAllCarCoordinate()]).then(this.renderMap)
		API.findAllSecurityEvents().then(res => this.allSecurityEvents = res.event_list)
		API.findAllStaff().then(res => this.allStaff = res.list)
		API.findAllCar().then(res => this.allCar = res.list)
		API.getAllDepart().then(res => {
			const allDepart = res.list
			Promise.all(res.list.map(v => API.getAllSiteByDep(v._id))).then(listArr => {
				listArr.forEach((list, idx) => {
					allDepart[idx].list = list.list
				})
				this.allDepart = allDepart
				console.log(allDepart)
			})
		})
	},
	mounted() {
		this.renderMap()
	},
	computed: {
		currStationList() {
			return this.allDepart[this.currArea] ? this.allDepart[this.currArea].list : []
		}
	},
	methods: {
		handleSiteMarkerClick(e) {
			const id = e.target.w.title
			API.getSiteAdminUrl(id).then(res => {
				this.siteIframe = res.url
				this.drawer = true
			})
		},
		handleCarMarkerClick(e) {
			const id = e.target.w.title
			const info = this.allCar.find(v => v._id === id)
			console.log(info)
			this.carDrawer = true
			this.currCar = info

		},
		renderMap([allSiteCoordinate, allCarCoordinate]) {
			const params = {
				// center: [104.3625834686277, 30.94012147329066],
				center: [104.10194, 30.65984],
				zoom: 12
			}
			params.mapStyle = 'amap://styles/f5a9c547f386fc7db858b941b4a7510d'
			var map = new AMap.Map('map', params);
			allSiteCoordinate.coordinateList.forEach(v => {
				const marker = new AMap.Marker({
					position: new AMap.LngLat(v[0], v[1]),
					icon: 'https://xzx-1302334646.cos.ap-nanjing.myqcloud.com/site.png',
					title: v[2]
				})
				marker.on('click', this.handleSiteMarkerClick, this)
				map.add(marker)
			})
			allCarCoordinate.coordinateList.forEach(v => {
				const marker = new AMap.Marker({
					position: new AMap.LngLat(v[0], v[1]),
					icon: 'https://xzx-1302334646.cos.ap-nanjing.myqcloud.com/car.png',
					title: v[2]
				})
				marker.on('click', this.handleCarMarkerClick, this)
				map.add(marker)
			})
		},
		onAreaChange(idx) {
			this.currArea = idx
			this.$refs.stationList.reset()
		},
	}
}
</script>

<style lang="less" scoped>
.home {
	h1 {
		position: absolute;
		top: 40px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 75px;
		color: #33e6f3;
		letter-spacing: 10px;
	}
	.city {
		position: absolute;
		left: 48%;
		top: 180px;
		font-size: 37px;
		transform: translateX(-50%);
	}
	.weather {
		position: absolute;
		right: 44%;
		top: 180px;
		font-size: 37px;
		transform: translateX(-50%);
	}

	.curr-time {
		position: absolute;
		right: 50px;
		top: 130px;
		font-size: 40px;
		color: #f5f5f5;
		font-weight: bold;
	}
	background: rgb(29, 32, 45);
	height: 100vh;
	width: 100vw;
	background-size: cover;
	color: #f5faff;
	font-size: 16px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center;
	// height: 500px;
	// width: 440px;
	.top {
		width: 100%;
	}
	.content {
		display: flex;
		.center-map {
			width: 50%;
			height: 90vh;
		}
		.right {
			width: 50%;
			height: 90vh;
			overflow: auto;
			.safeCenter {
				.scans {
					display: flex;
					justify-content: space-between;
					.item {
						display: flex;
						align-items: center;
						h5 {
							color: #1bafff;
							font-size: 36px;
						}
						img {
							height: 160px;
							width: 160px;
							margin-right: 40px;
						}
						.num {
							font-size: 72px;
							margin-right: 30px;
						}
						font-size: 32px;
					}
				}
				.station {
					display: flex;
					line-height: 104px;
					justify-content: space-between;
					border-left: 2px solid #1bafff;
					color: rgba(255, 255, 255, 0.65);
					font-size: 32px;
					margin-top: 60px;
					background: linear-gradient(
						270deg,
						rgba(0, 126, 205, 0) 0%,
						rgba(63, 147, 248, 0.23) 100%
					);
					height: 104px;
					padding: 0 20px;
				}
			}
		}
	}
	.stafflist {
		display: flex;
		> li {
			margin-right: 40px;
			position: relative;
			.box {
				height: 284px;
				width: 284px;
			}
			span {
				position: absolute;
				top: 10px;
				left: 20px;
				font-size: 36px;
				color: #fff;
			}
			.icon {
				position: absolute;
				top: 60%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.carlist {
		display: flex;
		> li {
			margin-right: 40px;
			position: relative;
			.box {
				height: 280px;
				width: 360px;
			}
			span {
				position: absolute;
				top: 5px;
				left: 20px;
				font-size: 36px;
				color: #fff;
			}
			.icon {
				position: absolute;
				top: 60%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.stationList {
		display: flex;
		margin-top: 60px;
		> li {
			position: relative;
			span {
				position: absolute;
				font-size: 30px;
				color: #1bafff;
				top: 65%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.areas {
		display: flex;
		> li {
			flex-shrink: 0;
			width: 280px;
			height: 120px;
			margin-right: 50px;
			display: flex;
			position: relative;
			align-items: center;
			img {
				height: 120px;
				width: 120px;
			}
			.num {
				font-size: 68px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 40px;
			}
			.name {
				font-size: 30px;
				color: #1bafff;
				margin-left: 30px;
			}
		}
	}
	::-webkit-scrollbar-track-piece {
		width: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}

	::-webkit-scrollbar {
		width: 10px;
		height: 6px;
	}

	::-webkit-scrollbar-thumb {
		height: 50px;
		background: rgba(100, 100, 100, 0.3);
		cursor: pointer;
	}

	::-webkit-scrollbar-thumb:hover {
		background: rgba(100, 100, 100, 0.4);
		cursor: pointer;
	}
	.iframe {
		width: 100%;
		height: 100%;
	}
	.car-drawer /deep/ .el-drawer {
		background: rgb(14, 20, 35);
		.content {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.car {
				height: 50vh;
				width: 100%;
				background: rgb(3, 9, 27);
				display: flex;
				align-items: center;
				.img {
					height: 550px;
					width: 1000px;
				}
				.info {
					flex: 1;
					color: #fff;
					text-align: left;
					padding-left: 200px;

					h2 {
						font-size: 48px;
						font-weight: normal;

						margin-bottom: 35px;
					}
					h5 {
						font-size: 40px;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
}
</style>
